<template>
<div class="">
  <criteria partial='criteria'  @show-con = "pocon" v-ref:cri>
    <div class= "form-horizontal" partial>
     <div class="col-sm-11">
        <label  class="col-sm-2 control-label">气表类型:</label>
        <div class="col-sm-2">
          <v-select id="f_meter_type"
          v-model="model.f_meter_type"
          placeholder='请选择'
          condition="t.f_meter_type ='{}'"
          :value.sync="model.f_meter_type"
          :options='$parent.metertype'
          close-on-select clear-button>
          </v-select>
        </div>
        <label  class="col-sm-2 control-label">气表品牌:</label>
        <div class="col-sm-2">
          <v-select id="f_meter_brand"
          v-model="model.f_meter_brand"
          placeholder='请选择'
          condition="t.f_meter_brand ='{}'"
          :value.sync="model.f_meter_brand"
          :options='$parent.meterBrand'
          close-on-select clear-button>
          </v-select>
        </div>
        <label for="f_charge_type" class="col-sm-2 control-label">收费类型:</label>
        <div class="col-sm-2 ">
          <v-select id="f_charge_type"
            v-model="model.f_charge_type"
            placeholder='请选择'
            condition="t.f_charge_type ='{}'"
            :value.sync="model.f_charge_type"
            :options='$parent.chargetype'
            close-on-select clear-button>
          </v-select>
        </div>
     </div>
     <div class="col-sm-11"  style="margin-top:10px;">
       <label for="f_pregas" class="col-sm-2 control-label">预购气量:</label>
       <div class="col-sm-6">
         <v-input :value.sync="$parent.f_pregas" :expression.sync = 'model.f_pregas' condition="t.f_pregas {}" v-model="model.f_pregas" v-ref:pregas><v-input>
       </div>
       <label for="f_payment" class="col-sm-2 control-label">付款方式:</label>
       <div class="col-sm-2">
         <v-select id="f_payment"
           v-model="model.f_payment"
           placeholder='请选择'
           condition="t.f_payment ='{}'"
           :value.sync="model.f_payment"
           :options='$parent.payment'
           close-on-select clear-button>
         </v-select>
       </div>
     </div>
     <div class="col-sm-11"  style="margin-top:10px;">
       <label for="f_preamount" class="col-sm-2 control-label">预购金额:</label>
       <div class="col-sm-6">
         <v-input :value.sync="$parent.f_preamount" :expression.sync = 'model.f_preamount' condition="t.f_preamount {}" v-model="model.f_preamount" v-ref:preamount><v-input>
       </div>
       <label for="f_charge_state" class="col-sm-2 control-label">收费状态:</label>
       <div class="col-sm-2">
         <v-select id="f_charge_state"
           v-model="model.f_charge_state"
           placeholder='请选择'
           condition="t.f_charge_state ='{}'"
           :value.sync="model.f_charge_state"
           :options='$parent.chargeState'
           close-on-select clear-button>
         </v-select>
       </div>
     </div>
     <div class="col-sm-11"  style="margin-top:10px;">
       <label for="f_collection" class="col-sm-2 control-label">收 款 :</label>
       <div class="col-sm-6">
         <v-input :value.sync="$parent.f_collection" :expression.sync = 'model.f_collection' condition="t.f_collection {}" v-model="model.f_collection" v-ref:input><v-input>
       </div>
       <!-- <label for="f_operator" class="col-sm-2 control-label">操作人:</label>
       <div class="col-sm-2">
        <input type="text" class="form-control" v-model="model.f_operator" condition="t.f_operator ='{}'"  placeholder="操作人"/>
       </div> -->
     </div>
    </div>
  </criteria>
</div>
</template>
<script>
import AppData from '../../../../../stores/AppData'
export default {
  data () {
    return {
      condition: '',
      f_collection: '',
      f_pregas: '',
      f_preamount: '',
      arr: []
    }
  },
  methods: {
    pocon () {
      let model = this.$refs.cri.model
      this.arr = []
      this.addSelectElement(model.f_meter_type, '气表类型', 'f_meter_type')
      this.addSelectElement(model.f_meter_brand, '气表品牌', 'f_meter_brand')
      this.addSelectElement(model.f_charge_type, '收费类型', 'f_charge_type')
      this.addVinputElement(this.f_pregas, model.f_pregas, '预购气量', 'f_pregas')
      this.addSelectElement(model.f_payment, '付款方式', 'f_payment')
      this.addVinputElement(this.f_preamount, model.f_preamount, '预购金额', 'f_preamount')
      this.addSelectElement(model.f_charge_state, '收费状态', 'f_charge_state')
      this.addVinputElement(this.f_collection, model.f_collection, '收款', 'f_collection')
      this.addElement(model.f_operator, '操作人', 'f_operator')

      this.$dispatch('showcond', this.arr)
    },
    addElement (value, chineseColumn, englishColumn) {
      if (value && value !== '') {
        this.arr.push({content: `${chineseColumn}:${value}`, culmn: englishColumn})
      }
    },
    addSelectElement (value, chineseColumn, englishColumn) {
      if (value && value.length > 0 && value[0] !== '') {
        this.arr.push({content: `${chineseColumn}:${value}`, culmn: englishColumn})
      }
    },
    addVinputElement (value, value2, chineseColumn, englishColumn) {
      if (value && value2 !== '') {
        this.arr.push({content: `${chineseColumn}:${value[0][0]} ${value[1]}`, culmn: englishColumn})
      }
    },
    sort () {
      for (let key in this.$refs.cri.model) {
        let num = 0
        for (let index in this.arr) {
          if (this.arr[index].culmn !== key) {
            num++
          }
        }
        if (num === (this.arr.length)) {
          this.$refs.cri.model[key] = ''
          if (key === 'f_collection') {
            this.$refs.cri.$refs.input.data = ''
            this.$refs.cri.$refs.input.symbol = ''
          }
          if (key === 'f_pregas') {
            this.$refs.cri.$refs.pregas.data = ''
            this.$refs.cri.$refs.pregas.symbol = ''
          }
          if (key === 'f_preamount') {
            this.$refs.cri.$refs.preamount.data = ''
            this.$refs.cri.$refs.preamount.symbol = ''
          }
        }
      }
    },
    reset () {
      this.$refs.cri.model.f_meter_type = ''
      this.$refs.cri.model.f_meter_brand = ''
      this.$refs.cri.model.f_operator = ''
      this.$refs.cri.model.f_charge_type = ''
      this.$refs.cri.model.f_collection = ''
      this.$refs.cri.$refs.input.data = ''
      this.$refs.cri.$refs.input.symbol = ''
      this.$refs.cri.$refs.pregas.data = ''
      this.$refs.cri.$refs.pregas.symbol = ''
      this.$refs.cri.$refs.preamount.data = ''
      this.$refs.cri.$refs.preamount.symbol = ''
      this.$refs.cri.model.f_payment = ''
      this.$refs.cri.model.f_charge_state = ''
    }
  },
  watch: {
    'arr': {
      deep: true,
      handler (val) {
        this.sort()
        this.$refs.cri.search()
      }
    }
  },
  computed: {
    userType () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用户类型')]
    },
    meterBrand () {
      return [{label: '全部', value: ''}, ...AppData.getParam('气表品牌')]
    },
    chargetype () {
      return [{label: '全部', value: ''}, ...AppData.getParam('收费类型')]
    },
    metertype () {
      return [{label: '全部', value: ''}, ...AppData.getParam('气表类型')]
    },
    payment () {
      return [{label: '全部', value: ''}, ...AppData.getParam('付款方式')]
    },
    chargeState () {
      return [{label: '全部', value: ''}, ...AppData.getParam('收费状态')]
    }
  }
}
</script>
